<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>vue基础入门</title>
</head>

<body>
  <div id="ts"></div>
  <!-- vue管理的模板 -->
  <h1>{{name}}</h1>
  <div id="app">
    <h1>姓名：{{name}}<br />年龄:{{age}}</h1>
    <h2>{{name}}{{age}}</h2>
  </div>
  <!-- 使用Vue =》步骤：1.引入vue.js 2. 使用  -->
  <!-- 引入vue.js -->
  <script src="https://cdn.jsdelivr.net/npm/vue@2.6.12"></script>
  <script>
    // 验证引入是否成功
    console.log(Vue)
    // 传统方式=》蒸汽时代（半手工）
    /**
     * 需求：把对象的name值显示到某个HTML元素中
     * 做法：操作DOM赋值
     */
    let obj = {
      name: '李刚'
    }
    document.getElementById('ts').innerHTML = obj.name
    setTimeout(() => {
      obj.name = '李刚爸爸'
      document.getElementById('ts').innerHTML = obj.name
    }, 3000)

    // 现代的方式=》电气时代（全自动）
    const vm = new Vue({
      // vue管理的模板边界=》只有这个元素下的模板才会生效
      el: '#app',
      // 声明数据的一个地方
      data: {
        // 声明Vue模板中的数据=>默认值
        name: '特朗普',
        age: 70
      }
    })
    setTimeout(() => {
      // 只需要修改数据=》视图HTML自动刷新=》显示最新修改的值
      vm.name = '普京'
      vm.age = 100
    }, 3000);
  </script>
</body>

</html>